<template>
    <div class="isDialog" style="height: 600px;">
        <div>
            <div>
                <el-form :model="data" ref="form" label-width="90px" :inline="true">
                    <el-row :gutter="24">
                        <el-col :span="6" :offset="0">

                            <template v-if="data.subType === '采购' || data.subType === '其它'">
                                <el-form-item label="供应商：">
                                    {{ data.supName }}
                                </el-form-item>
                            </template>
                            <template v-else-if="data.subType === '销售退货'">
                                <el-form-item label="客户：">
                                    {{ data.supName }}
                                </el-form-item>
                            </template>
                            <template v-else-if="data.subType === '零售退货'">
                                <el-form-item label="会员卡号：">
                                    {{ data.supName }}
                                </el-form-item>
                            </template>
                        </el-col>

                        <el-col :span="6" :offset="0">
                            <el-form-item label="单据日期：">
                                {{ data.operTime }}
                            </el-form-item>
                        </el-col>
                        <el-col :span="6" :offset="0">
                            <el-form-item label="单据编号：">
                                {{ data.headNumber }}
                            </el-form-item>
                        </el-col>
                        <el-col :span="6" :offset="0">
                            <el-form-item label="关联订单：">
                                <el-button type="primary" link @click="getOrderDetail(data.linkNumber)">
                                    {{ data.linkNumber }}
                                </el-button>
                            </el-form-item>
                        </el-col>
                        <template v-if="data.subType === '零售'">
                            <el-col :span="6" :offset="0">
                                <el-form-item label="收款类型：">
                                    现付
                                </el-form-item>
                            </el-col>
                        </template>
                    </el-row>
                </el-form>
            </div>
            <div>
                <template v-if="data.subType === '零售' || data.subType === '零售退货'">
                    <el-row :gutter="24">
                        <el-col :span="18" :offset="0">
                            <el-table :data="data.tableData" show-summary :summary-method="getSummaries" border stripe>
                                <el-table-column v-for="col in data.tableTitle" :prop="col.prop" :key="col.id"
                                    :label="col.label" :width="col.width">
                                </el-table-column>
                            </el-table>
                        </el-col>
                        <el-col :span="6" :offset="0">
                            <el-form :model="data" ref="form" label-width="90px" :inline="false">
                                <el-form-item label="单据金额：">
                                    {{ Math.abs(data.totalPrice) }}
                                </el-form-item>
                                <el-form-item label="收款金额：">
                                    {{ Math.abs(data.changeAmount) }}
                                </el-form-item>
                                <el-form-item label="找零：">
                                    {{ data.backAmount }}
                                </el-form-item>
                                <el-form-item label="收款账户：">
                                    {{ data.accountName }}
                                </el-form-item>
                                <template v-if="data.saleBack != null">
                                    <el-form-item label="退货单号：">
                                        <el-button type="primary" @click="">
                                            {{ data.saleBack }}
                                        </el-button>
                                    </el-form-item>
                                </template>
                            </el-form>

                        </el-col>
                    </el-row>
                </template>
                <template v-else-if="data.subType !== '零售'">
                    <el-table :data="data.tableData" show-summary :summary-method="getSummaries" border stripe>
                        <el-table-column type="index" label="#" width="53" align="center" />
                        <el-table-column v-for="col in data.tableTitle" :prop="col.prop" :key="col.id"
                            :label="col.label" :width="col.width">
                        </el-table-column>
                    </el-table>

                </template>
            </div>

            <div style="margin-top: 60px;">
                <template v-if="data.subType === '采购' || data.subType === '销售退货'">
                    <el-form :model="data" label-width="110px">
                        <el-row :gutter="24">
                            <el-col :span="6" :offset="0">
                                <el-form-item label="优惠率：">
                                    {{ data.discount }}%
                                </el-form-item>
                            </el-col>
                            <el-col :span="6" :offset="0">
                                <el-form-item label="付款优惠：">
                                    {{ data.discountMoney }}
                                </el-form-item>
                            </el-col>
                            <el-col :span="6" :offset="0">
                                <el-form-item label="优惠后金额：">
                                    {{ data.discountLastMoney }}
                                </el-form-item>
                            </el-col>
                            <el-col :span="6" :offset="0">
                                <el-form-item label="其他费用：">
                                    {{ data.otherMoney }}
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="24">
                            <el-col :span="6" :offset="0">
                                <el-form-item label="结算账户：">
                                    {{ data.accountName }}
                                </el-form-item>
                            </el-col>
                            <el-col :span="6" :offset="0">
                                <el-form-item label="本次付款：">
                                    {{ Math.abs(data.changeAmount) }}
                                </el-form-item>
                            </el-col>
                            <el-col :span="6" :offset="0">
                                <el-form-item label="本次欠款：">
                                    {{ Math.abs(data.changeAmount) - data.discountLastMoney }}
                                </el-form-item>
                            </el-col>
                            <template v-if="data.saleBack">
                                <el-form-item label="退货单号：">
                                    <el-button type="primary" link @click="getPurchaseReturn(data.saleBack)">
                                        {{ data.saleBack }}
                                    </el-button>
                                </el-form-item>
                            </template>
                            <el-col :span="6" :offset="0">
                                <template v-if="data.subType === '销售退货'">
                                    <el-form-item label="销售人员：">
                                        {{ data.salesMan }}
                                    </el-form-item>

                                </template>
                            </el-col>
                        </el-row>
                    </el-form>


                </template>
            </div>
        </div>

        <div class="btn-close">
            <el-button @click="closeOne">取消</el-button>
        </div>
    </div>

    <el-dialog :title="detailTitle" v-model="detailVisble" width="100%">
        <template v-if="subData.subType === '销售订单' || subData.subType == '采购订单'">
            <OrderDetail :data="subData"></OrderDetail>
        </template>
        <template v-else>
            <DepotBack :data="subData"></DepotBack>
        </template>

    </el-dialog>

</template>

<script setup>
import { ref, defineProps, defineEmits, onMounted } from 'vue'
import { getDetail, getDepotHead } from '@/components/material_bill_detail/js/Stoke'
import OrderDetail from './OrderDetail.vue';
import DepotBack from './DepotBack.vue';


let detailVisble = ref(false)
let detailTitle = ref('')

const form = ref(null)
const data = ref({})
const subData = ref({})

const props = defineProps(['depotHead'])

const emits = defineEmits(['close', 'purchaseReturn'])

/**
 * 跳转关联订单
 * @param linkNumber 订单号
 */
const getOrderDetail = async (linkNumber) => {
    subData.value = await getDetail(linkNumber)
    detailTitle.value = subData.value.subType + '-详情'
    detailVisble.value = true
}

/**
 * 跳转采购退货详情
 * @param saleBack 退货单号
 */
const getPurchaseReturn = (saleBack) => {
    emits('purchaseReturn', saleBack)
}

/**
 * 设置表尾合计
 * @param param 表格数据
 */
const getSummaries = (param) => {
    const { columns, data } = param;
    const sums = [];

    columns.forEach((column, index) => {
        if (index === 0) {
            sums[index] = "合计";
            return;
        }
        const values = data.map((item) => Number(item[column.property]));
        // 只合计amount1和amount3，想合并哪些列就在这里指定
        if (column.property === "operNumber" || column.property === "allPrice"
            || column.property === "taxMoney" || column.property === "taxLastMoney") {
            sums[index] = values.reduce((prev, curr) => {
                const value = Number(curr);
                if (!isNaN(value)) {
                    return prev + curr;
                } else {
                    return prev;
                }
            }, 0);
        }
    });
    return sums;
}

const closeOne = () => {
    emits('close')
}

onMounted(async () => {
    data.value = await getDetail(props.depotHead.number)
})
</script>

<style scoped></style>
